import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { Button, Col, Form, Input, message, Row, Table } from 'antd';
import { Ref, useState, useRef, useEffect, useContext } from 'react';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { IntentModalService } from '../services/IntentModalServices';
import { intentManageColumn } from '../mconfig/IntentManageColumn';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import RangePicker from '@/components/RangePicker';

const IntentModal = ({ onClose, onSave, curRes }) => {
  // ModalRef
  const IntentModalRef: Ref<IOneModalRef> = useRef(null);

  // 查询条件表单实例
  const [searchForm] = Form.useForm();

  // 表格选中行的key
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 表格选中行内容
  const [selectedRows, setSelectedRows] = useState<Record<string, any>[]>([]);

  // 请求数据
  const { data, loading, pagination, reloadRequest } = IntentModalService(curRes);

  // 表格复选框配置
  const rowSelection: any = {
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => {
      setSelectedRowKeys(selectedRowKeys);
      setSelectedRows(selectedRows);
    },
    type: 'radio',
  };

  // 弹窗确认事件
  const onSubmit = () => {
    if (selectedRows?.length) {
      onSave(selectedRows?.[0]);
      onCloseModalCommon(IntentModalRef);
    } else {
      message?.success('请选择意向公开！');
    }
  };

  // 表格分页方法
  const handlePaginationChange = (current, pageSize, params) => {
    reloadRequest({ pageSize, current, ...params, ...searchForm.getFieldsValue() });
  };

  // 表格操作按钮
  const modalFooterRender = () => {
    return (
      <>
        <Button onClick={() => onCloseModalCommon(IntentModalRef)}>取消</Button>
        <Button type={'primary'} onClick={onSubmit}>
          确认
        </Button>
      </>
    );
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={IntentModalRef}
        title={'意向公开'}
        width={document.body.clientWidth * 0.7}
        onCancel={onClose}
        footer={modalFooterRender()}
        bodyStyle={{
          padding: '5px 10px',
          height: '500px',
          display: 'flex',
          flexDirection: 'column',
        }}
        centered
      >
        <div className={'ProjectModalSearch'}>
          <Form form={searchForm}>
            <Row gutter={[8, 0]}>
              <Col span={4}>
                <Form.Item name={'intentName'}>
                  <Input placeholder="意向公开名称" />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item name={'purchaseInfo'}>
                  <Input placeholder="采购需求概况" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name={'intentTime'}>
                  <RangePicker name={'意向公开时间'} />
                </Form.Item>
              </Col>
              <Col span={8} style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Form.Item>
                  <Button
                    type={'default'}
                    icon={<ReloadOutlined />}
                    onClick={() => {
                      searchForm.resetFields();
                      reloadRequest({ pageSize: 10, current: 1 });
                    }}
                    onMouseOut={(event: any) => {
                      event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                    }}
                    style={{ marginRight: 0, float: 'right' }}
                  >
                    重置
                  </Button>
                  <Button
                    type={'primary'}
                    icon={<SearchOutlined />}
                    onMouseOut={(event: any) => {
                      event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                    }}
                    style={{ marginRight: '8px', float: 'right' }}
                    onClick={() => {
                      let reqBody = { ...searchForm?.getFieldsValue() };
                      // 处理意向公开时间
                      if (reqBody?.intentTime) {
                        reqBody.intentTimeState = reqBody?.intentTime[0].format('YYYY-MM-DD 00:00:00');
                        reqBody.intentTimeEnd = reqBody?.intentTime[1].format('YYYY-MM-DD 23:59:59');
                        delete reqBody.intentTime;
                      }
                      reloadRequest(reqBody);
                    }}
                  >
                    查询
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={`list-table ProjectModalTable`}>
          <Table
            size="small"
            bordered
            scroll={{ x: 1000, y: 1000 }}
            style={{ margin: '0' }}
            // rowClassName={setTableRowClassName}
            loading={loading}
            dataSource={data?.rows || []}
            rowSelection={rowSelection}
            columns={intentManageColumn() as any}
            rowKey={'id'}
            pagination={
              {
                pageSize: pagination?.pageSize,
                current: pagination?.current,
                total: pagination?.total,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: commonPageSizeOptions,
                showTotal: showTotalInfo,
                onChange: handlePaginationChange,
              } as any
            }
            onRow={(record) => {
              return {
                onClick: (event) => {
                  setSelectedRowKeys([record?.id]);
                  setSelectedRows([record]);
                },
              };
            }}
          />
        </div>
      </OneModal>
    </>
  );
};

export { IntentModal };
